@import "normalize.css";
@import "font-awesome.min.css";
@media only screen and (max-width: 2000px) {
  body {
    font-size: 42px;
  }
}

@media only screen and (max-width: 1600px) {
  body {
    font-size: 40px;
  }
}

@media only screen and (max-width: 1500px) {
  body {
    font-size: 38px;
  }
}

@media only screen and (max-width: 1400px) {
  body {
    font-size: 36px;
  }
}

@media only screen and (max-width: 1300px) {
  body {
    font-size: 34px;
  }
}

@media only screen and (max-width: 1200px) {
  body {
    font-size: 28px;
  }
}

@media only screen and (max-width: 1100px) {
  body {
    font-size: 22px;
  }
}

@media only screen and (max-width: 1000px) {
  body {
    font-size: 22px;
  }
}

@media only screen and (max-width: 900px) {
  body {
    font-size: 20px;
  }
}

@media only screen and (max-width: 800px) {
  body {
    font-size: 18px;
  }
}

@media only screen and (max-width: 700px) {
  body {
    font-size: 14px;
  }
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 10px;
  }
}

@media only screen and (max-width: 500px) {
  body {
    font-size: 8px;
  }
}

@media only screen and (max-width: 400px) {
  body {
    font-size: 4px;
  }
}

@media only screen and (max-width: 300px) {
  body {
    font-size: 1px;
  }
}


/* more color */

.text-default {
  color: #474949;
}

.text-primary {
  color: #446e9b;
}

.text-success {
  color: #3cb521;
}

.text-info {
  color: #3399f3;
}

.text-warning {
  color: #d47500;
}

.text-danger {
  color: #cd0200;
}

.bg-default {
  color: #ffffff;
  background-color: #474949;
  border-color: #474949;
}

.bg-primary {
  color: #ffffff;
  background-color: #446e9b;
  border-color: #446e9b;
}

.bg-success {
  color: #ffffff;
  background-color: #3cb521;
  border-color: #3cb521;
}

.bg-info {
  color: #ffffff;
  background-color: #3399f3;
  border-color: #3399f3;
}

.bg-warning {
  color: #ffffff;
  background-color: #d47500;
  border-color: #d47500;
}

.bg-danger {
  color: #ffffff;
  background-color: #cd0200;
  border-color: #cd0200;
}

.bg-default {
  background-image: linear-gradient(#6d7070, #474949 50%, #3d3f3f);
  background-repeat: no-repeat;
  border-color: #2e2f2f;
}

a.bg-default:hover,
button.bg-default:hover,
input.bg-default:hover {
  background-image: linear-gradient(#636565, #3d3f3f 50%, #333434);
  background-repeat: no-repeat;
  border-color: #242525;
}

.bg-primary {
  background-image: linear-gradient(#6d94bf, #446e9b 50%, #3e648d);
  background-repeat: no-repeat;
  border-color: #345578;
}

a.bg-primary:hover,
button.bg-primary:hover,
input.bg-primary:hover {
  background-image: linear-gradient(#5f8ab9, #3e648d 50%, #385a7f);
  background-repeat: no-repeat;
  border-color: #2e4b69;
}

.bg-success {
  background-image: linear-gradient(#61dd45, #3cb521 50%, #36a41e);
  background-repeat: no-repeat;
  border-color: #2e8a19;
}

a.bg-success:hover,
button.bg-success:hover,
input.bg-success:hover {
  background-image: linear-gradient(#52da34, #36a41e 50%, #31921b);
  background-repeat: no-repeat;
  border-color: #287916;
}

.bg-info {
  background-image: linear-gradient(#7bbdf7, #3399f3 50%, #208ff2);
  background-repeat: no-repeat;
  border-color: #0e80e5;
}

a.bg-info:hover,
button.bg-info:hover,
input.bg-info:hover {
  background-image: linear-gradient(#68b3f6, #208ff2 50%, #0e86ef);
  background-repeat: no-repeat;
  border-color: #0c75d2;
}

.bg-warning {
  background-image: linear-gradient(#ff9c21, #d47500 50%, #c06a00);
  background-repeat: no-repeat;
  border-color: #a15900;
}

a.bg-warning:hover,
button.bg-warning:hover,
input.bg-warning:hover {
  background-image: linear-gradient(#ff930d, #c06a00 50%, #ab5e00);
  background-repeat: no-repeat;
  border-color: #8d4e00;
}

.bg-danger {
  background-image: linear-gradient(#ff1d1b, #cd0200 50%, #b90200);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff1d1b', endColorstr='#ffb90200', GradientType=0);
  border-color: #9a0200;
}

a.bg-danger:hover,
button.bg-danger:hover,
input.bg-danger:hover {
  background-image: linear-gradient(#ff0906, #b90200 50%, #a40200);
  background-repeat: no-repeat;
  border-color: #860100;
}

body {
  background: url(../img/bg-shelflabels.jpg) no-repeat bottom center;
  background-attachment: fixed;
  background-size: cover;
}


/* header */

.header {
  overflow: hidden;
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  padding-top: 1%;
  background-color: rgba(white, .9);
  .logo {
    width: 12%;
    float: left;
    padding: 0 1%;
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  }
  .header-title {
    width: 74%;
    float: right;
    border-bottom: 2px solid #225378;
    margin-right: 1%;
    h1 {
      margin: 0;
      font-size: .5em;
      text-align: right;
      padding-top: 5px;
      font-weight: normal;
    }
  }
}


/* footer */

.footer {
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  height: 4vh;
  bottom: 0;
  background: white;
  box-shadow: 0 -1px 5px #d0d0d0;
  .left,
  .right {
    display: inline-block;
    line-height: 4vh;
    font-size: .5em;
  }
  .left {
    padding-left: 2%;
    float: left;
  }
  .left span {
    font-weight: bold;
    color: red;
  }
  .right {
    padding-right: 2%;
    text-align: right;
    float: right;
  }
}


/* container */

.container {
  //  margin-top: 2em;
  //  margin-top:10vh;
  //  height: 90vh;
  //  overflow-y: auto;
  padding: 8vh 0vw;
}

.mainmenu {
  text-align: center;
  //  height: 80vh;
  position: relative;
  .mainmenu-list {
    position: absolute;
    top: 40vh;
    margin-top: -15vh;
    width: 100%;
  }
  a {
    display: inline-block;
    width: 6.5em;
    height: 6.5em;
    margin: 0 1%;
    border-radius: 20%;
    text-decoration: none;
    border: 5px solid white;
    box-shadow: 1px 1px 8px rgba(black, .3);
    position: relative;
    &:hover {
      span:first-of-type {
        transition: all .5s;
        transform: rotateY(360deg);
      }
    }
    i {
      font-size: 2em;
    }
    span {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      &:first-of-type {
        top: 1.2em;
      }
      &:last-of-type {
        top: 3.5em;
      }
    }
  }
}


/* 表格样式 */

table {
  background-color: rgba(white, .8);
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #808080;
  text-align: left;
}

td,
th {
  padding: 0;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  //  max-width: 100%;
  margin-bottom: 18px;
}

.table>thead>tr>th,
.table>thead>tr>td,
.table>tbody>tr>th,
.table>tbody>tr>td,
.table>tfoot>tr>th,
.table>tfoot>tr>td {
  padding: 8px;
  line-height: 1.42857;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table>thead>tr>th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table>caption+thead>tr:first-child>th,
.table>caption+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>td,
.table>thead:first-child>tr:first-child>th,
.table>thead:first-child>tr:first-child>td {
  border-top: 0;
}

.table>tbody+tbody {
  border-top: 2px solid #ddd;
}

.table .table {
  background-color: #FCFCFC;
}

.table-condensed>thead>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>tfoot>tr>td {
  padding: 5px;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>tfoot>tr>td {
  border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
  border-bottom-width: 2px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table-hover>tbody>tr:hover {
  background-color: #f5f5f5;
}

table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}

table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;
}

.table>thead>tr>td.active,
.table>thead>tr>th.active,
.table>thead>tr.active>td,
.table>thead>tr.active>th,
.table>tbody>tr>td.active,
.table>tbody>tr>th.active,
.table>tbody>tr.active>td,
.table>tbody>tr.active>th,
.table>tfoot>tr>td.active,
.table>tfoot>tr>th.active,
.table>tfoot>tr.active>td,
.table>tfoot>tr.active>th {
  background-color: #f5f5f5;
}

.table-hover>tbody>tr>td.active:hover,
.table-hover>tbody>tr>th.active:hover,
.table-hover>tbody>tr.active:hover>td,
.table-hover>tbody>tr:hover>.active,
.table-hover>tbody>tr.active:hover>th {
  background-color: #e8e8e8;
}

.table>thead>tr>td.success,
.table>thead>tr>th.success,
.table>thead>tr.success>td,
.table>thead>tr.success>th,
.table>tbody>tr>td.success,
.table>tbody>tr>th.success,
.table>tbody>tr.success>td,
.table>tbody>tr.success>th,
.table>tfoot>tr>td.success,
.table>tfoot>tr>th.success,
.table>tfoot>tr.success>td,
.table>tfoot>tr.success>th {
  background-color: #dff0d8;
}

.table-hover>tbody>tr>td.success:hover,
.table-hover>tbody>tr>th.success:hover,
.table-hover>tbody>tr.success:hover>td,
.table-hover>tbody>tr:hover>.success,
.table-hover>tbody>tr.success:hover>th {
  background-color: #d0e9c6;
}

.table>thead>tr>td.info,
.table>thead>tr>th.info,
.table>thead>tr.info>td,
.table>thead>tr.info>th,
.table>tbody>tr>td.info,
.table>tbody>tr>th.info,
.table>tbody>tr.info>td,
.table>tbody>tr.info>th,
.table>tfoot>tr>td.info,
.table>tfoot>tr>th.info,
.table>tfoot>tr.info>td,
.table>tfoot>tr.info>th {
  background-color: #d9edf7;
}

.table-hover>tbody>tr>td.info:hover,
.table-hover>tbody>tr>th.info:hover,
.table-hover>tbody>tr.info:hover>td,
.table-hover>tbody>tr:hover>.info,
.table-hover>tbody>tr.info:hover>th {
  background-color: #c4e3f3;
}

.table>thead>tr>td.warning,
.table>thead>tr>th.warning,
.table>thead>tr.warning>td,
.table>thead>tr.warning>th,
.table>tbody>tr>td.warning,
.table>tbody>tr>th.warning,
.table>tbody>tr.warning>td,
.table>tbody>tr.warning>th,
.table>tfoot>tr>td.warning,
.table>tfoot>tr>th.warning,
.table>tfoot>tr.warning>td,
.table>tfoot>tr.warning>th {
  background-color: #fcf8e3;
}

.table-hover>tbody>tr>td.warning:hover,
.table-hover>tbody>tr>th.warning:hover,
.table-hover>tbody>tr.warning:hover>td,
.table-hover>tbody>tr:hover>.warning,
.table-hover>tbody>tr.warning:hover>th {
  background-color: #faf2cc;
}

.table>thead>tr>td.danger,
.table>thead>tr>th.danger,
.table>thead>tr.danger>td,
.table>thead>tr.danger>th,
.table>tbody>tr>td.danger,
.table>tbody>tr>th.danger,
.table>tbody>tr.danger>td,
.table>tbody>tr.danger>th,
.table>tfoot>tr>td.danger,
.table>tfoot>tr>th.danger,
.table>tfoot>tr.danger>td,
.table>tfoot>tr.danger>th {
  background-color: #f2dede;
}

.table-hover>tbody>tr>td.danger:hover,
.table-hover>tbody>tr>th.danger:hover,
.table-hover>tbody>tr.danger:hover>td,
.table-hover>tbody>tr:hover>.danger,
.table-hover>tbody>tr.danger:hover>th {
  background-color: #ebcccc;
}

.error {
  position: fixed;
  text-align: center;
  top: 1.7em;
  left: 0;
  right: 0;
}

.labelwrap,
.labellist {
  width: 80%;
  font-size: 0.5em;
  //  margin: 5% auto;
  margin: 0 auto;
  overflow-x: auto;
}

.title {
  h2 {
    margin: .2em 0;
    font-size: .7em;
    color: #225378;
    padding-left: 2vw;
  }
}


/* 按钮类 */

.btn {
  text-decoration: none;
  border-radius: .25em;
  box-shadow: 1px 1px 3px rgba(black, .3);
}

.btn-left,
.btn-right,
.btn-left2,
.btn-right2 {
  position: fixed;
  bottom: 10vh;
  font-size: .8em;
  width: 3em;
  height: 5em;
  border: 3px solid white;
  display: table;
  text-align: center;
  span {
    display: table-cell;
    vertical-align: middle;
  }
}

.btn-left2,
.btn-right2 {
  bottom: 30vh;
}

.btn-left,
.btn-left2 {
  left: 2vw;
}

.btn-right,
.btn-right2 {
  right: 2vw;
}


/* booksearch */

.booksearch {
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  font-size: .5em;
  position: relative;
}

.booksearch form {
  display: flex;
  padding: 1% 2%;
  border-radius: .25em;
  box-shadow: 1px 1px 3px rgba(black, .3);
}

.booksearch input,
.booksearch button {
  font-size: 1em;
  padding: 1%;
  outline: none;
  border: none;
  border-radius: .25em;
}

.booksearch input {
  flex: 1 75%;
}

.booksearch button {
  flex: 1 20%;
  box-sizing: border-box;
  //  background: none;
  cursor: pointer;
}

.loading {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 9999;
  width: 10%;
  margin-left: -5%;
}

.loading img {
  width: 100%;
  animation: xuanzhuan 1.2s infinite linear;
}

@keyframes xuanzhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* 检索图书 */

.booksearch-list {
  font-size: .6em;
}

.booksearch-list-wrap {
  width: 89%;
  padding-left: 11vw;
  overflow: hidden;
}

.booklist {
  width: 100%;
  height: 65vh;
  overflow-y: auto;
  padding: 1em 0 0 0;
}

.booklist .onebook {
  width: 77vw;
  box-sizing: border-box;
  font-size: 1em;
}

.booklist .bookblock {
  overflow: hidden;
  margin-bottom: 2%;
  //  background-color:rgba(white,.5);
}

.booklist .timing {
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-family: "宋体";
  border-left: 20px solid #8e2800;
  border-bottom: 1px solid #8e2800;
  text-align: left;
  padding-left: 0.5em;
}

.booklist .leftinf {
  width: 30%;
  float: left;
  font-size: 0.74em;
  font-family: "楷体";
  font-weight: bold;
}

.booklist .leftinf .smaller {
  font-size: 0.9em;
  font-family: "宋体";
  font-weight: normal;
}

.booklist .leftinf div:nth-of-type(1),
.booklist .leftinf div:nth-of-type(2) {
  text-align: left;
  padding-left: 3em;
}

.booklist .leftinf div:nth-of-type(3),
.booklist .leftinf div:nth-of-type(4),
.booklist .leftinf div:nth-of-type(5) {
  text-align: left;
  padding-left: 3em;
}

.booklist .leftinf div:nth-of-type(5) {
  width: 321%;
}

.booklist .rightinf {
  width: 70%;
  float: left;
  font-size: 0.74em;
  font-family: "宋体";
  font-weight: bold;
}

.booklist .rightinf .smaller {
  font-size: 0.9em;
  font-family: "宋体";
  font-weight: normal;
}

.booklist .rightinf div:nth-of-type(1),
.booklist .rightinf div:nth-of-type(2) {
  text-align: left;
  padding-left: 2em;
  font-size: 1.1em;
}

.booklist .rightinf div:nth-of-type(3),
.booklist .rightinf div:nth-of-type(4) {
  text-align: left;
  padding-left: 2em;
  font-family: "楷体";
}

.booklist .rightinf div:nth-of-type(5) {
  width: 0;
}

.booklist .rightinf div {
  border-bottom: 1px solid lightgray;
  height: 3.5vh;
  line-height: 3.5vh;
}

.booklist .leftinf div {
  text-align: right;
  border-bottom: 1px solid lightgray;
  height: 3.5vh;
  line-height: 3.5vh;
}

.booklist .bookblock .leftinf div:nth-child(even) {
  background: rgba(255, 255, 255, 0.7);
}

.booklist .bookblock .leftinf div:nth-child(odd) {
  background: rgba(255, 255, 255, 0.5);
}

.booklist .bookblock .rightinf div:nth-child(even) {
  background: rgba(255, 255, 255, 0.7);
}

.booklist .bookblock .rightinf div:nth-child(odd) {
  background: rgba(255, 255, 255, 0.5);
}
